<!-- 本组件有 首页 集团月报 项目月报三个页面使用 -->
<template>
  <div class="padding-20 font-weight-700 whole-box flex-column">
    <div class="flex justify-between margin-bottom-30 title-box">
      <div class="font-size-18 font-weight-700 margin-bottom-20 title-box">{{ tableType == 'capture' ? '欠缴情况' : '空置状况' }}</div>
      <div v-if="systemType == 'businessBuildingOperate'" class="project-select">
        <el-select v-model="projectKey" size="mini" placeholder="请选择项目" @change="changeProject">
          <el-option v-for="item in projectOptions" :key="item.projectKey" :label="item.projectName" :value="item.projectKey" />
        </el-select>
      </div>
    </div>
    <div class="flex tab-box">
      <template v-for="(item, index) in tabList">
        <div v-show="item.isShow" class="tab cursor-pointer margin-right-10" :class="item.type == currentTab ? 'active' : 'no-active'" :key="index" @click="tabChange(item)">{{ item.lable }}</div>
      </template>
    </div>
    <div class="flex-1">
      <table-arrearage v-if="currentTab == 'arrearageOut'" class="table-box" key="arrearageOut" ref="arrearageOut" :source-data="tabList[0].list || []" pageType="operation"></table-arrearage>
      <table-arrearage v-if="currentTab == 'arrearageInline'" class="table-box" key="arrearageInline" ref="arrearageInline" :source-data="tabList[1].list || []" pageType="operation"></table-arrearage>
      <table-empty v-if="currentTab == 'emptyOut'" class="table-box" key="arrearageOut" ref="arrearageOut" :source-data="tabList[3].list || []" pageType="operation"></table-empty>
      <table-empty v-if="currentTab == 'emptyInline'" class="table-box" key="arrearageInline" ref="arrearageInline" :source-data="tabList[4].list || []" pageType="operation"></table-empty>
      <table-arrearage v-if="currentTab == 'arrearageMoreCash'" class="table-box" key="arrearageMoreCash" ref="arrearageMoreCash" :source-data="tabList[2].list || []" pageType="operation"></table-arrearage>
    </div>
  </div>
</template>
<script>
  // operation:运营视图
  import { apiViewOperateCapture, apiEmptyAsset } from '@a/about';
  import * as echartsConfig from '@js/echartsConfig';
  import tableArrearage from './tableArrearage';
  import tableEmpty from './tableEmpty';
  import Bar from '@c/echarts/bar';
  import cLine from '@c/echarts/line';
  import { accMul } from '@/common/js/utils.js';
  import { projectList } from '@/api';

  export default {
    props: {
      //vacancy 空置  capture 收缴
      tableType: {
        type: String,
        default: '',
      },
    },

    data() {
      return {
        currentTab: 'arrearageOut',
        projectKey: this.$route.query.projectKey || localStorage.getItem('projectKey'),
        tabList: [
          {
            type: 'arrearageOut',
            lable: '欠缴(30天以上)',
            list: [],
            isShow: true,
          },
          {
            type: 'arrearageInline',
            lable: '欠缴(30天以内)',
            list: [],
            isShow: true,
          },
          {
            type: 'arrearageMoreCash',
            lable: '欠款超押金',
            list: [],
            isShow: true,
          },
          {
            type: 'emptyOut',
            lable: '空置(30天以上)',
            list: [],
            isShow: true,
          },
          {
            type: 'emptyInline',
            lable: '空置(30天以内)',
            list: [],
            isShow: true,
          },
          // {
          //   type: 'captureCash',
          //   lable: '收缴率(现金流)',
          //   chConfig: JSON.parse(JSON.stringify(echartsConfig.lineConfig)),
          //   list: [],
          // },
          // {
          //   type: 'captureLimit',
          //   lable: '收缴率(权责)',
          //   chConfig: JSON.parse(JSON.stringify(echartsConfig.lineConfig)),
          //   list: [],
          // },
        ],
        projectOptions: [],
        systemType: localStorage.getItem('systemType'),
      };
    },

    methods: {
      //收缴状况欠费
      async getSourse() {
        let cashList = []; //现金
        let forecastList = []; //权责
        let params = { projectKey: this.projectKey };
        if (this.tableType) {
          params.year = this.$route.query.year;
          params.month = this.$route.query.month;
        }
        let res = await apiViewOperateCapture(params);

        this.tabList[0].list = res.geArrearsList;
        this.tabList[1].list = res.leArrearsList;

        let arrearageMoreCashList = [];
        if (res.geArrearsList && res.geArrearsList.length > 0) {
          res.geArrearsList.forEach(item => {
            if (item.arrearsRate * 100 > 100) {
              arrearageMoreCashList.push(item);
            }
          });
        }

        if (res.leArrearsList && res.leArrearsList.length > 0) {
          res.leArrearsList.forEach(item => {
            if (item.arrearsRate * 100 > 100) {
              arrearageMoreCashList.push(item);
            }
          });
        }
        this.tabList[2].list = arrearageMoreCashList;
      },

      //空置状况
      async getEmptySourse() {
        let cashList = []; //现金
        let forecastList = []; //权责
        let params = { projectKey: this.projectKey };
        if (this.tableType) {
          params.year = this.$route.query.year;
          params.month = this.$route.query.month;
        }
        let res = await apiEmptyAsset(params);
        this.tabList[3].list = res.geEmptyAssetList || [];
        this.tabList[4].list = res.leEmptyAssetList || [];
      },

      //项目列表
      async getProjectList() {
        let res = await projectList({});
        this.projectOptions = res.rows;
        this.projectKey = res.rows.length > 0 ? res.rows[0].projectKey : '';
        if (!this.projectKey) return
        this.getSourse();
        this.getEmptySourse();
      },

      changeProject() {
        this.getSourse();
        this.getEmptySourse();
      },

      //初始化配置
      initChartConfig() {
        this.tabList[3].chConfig.xAxis.axisTickShow = false;
        this.tabList[3].chConfig.yAxis.splitLineShow = false;
        this.tabList[4].chConfig.xAxis.axisTickShow = false;
        this.tabList[4].chConfig.yAxis.splitLineShow = false;
      },

      //tab切换
      async tabChange(item) {
        this.currentTab = item.type;
        if (this.currentTab == 'captureCash' || this.currentTab == 'captureLimit') this.$refs[item.type].resize();
      },

      initTab() {
        if (this.tableType == 'vacancy') {
          this.tabList[0].isShow = false;
          this.tabList[1].isShow = false;
          this.tabList[2].isShow = false;
          this.currentTab = 'emptyOut';
        } else if (this.tableType == 'capture') {
          this.tabList[3].isShow = false;
          this.tabList[4].isShow = false;
        }
      },
    },

    created() {
      this.initTab();
      //businessBuildingOperate 商写运营要独立选择项目 初始为第一个项目
      if (this.systemType == 'businessBuildingOperate') {
        this.getProjectList();
      } else {
        this.getSourse();
        this.getEmptySourse();
      }
    },

    components: { Bar, cLine, tableArrearage, tableEmpty },
  };
</script>
<style scoped lang="scss">
  .shadow-box:hover {
    box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.1);
  }

  .tab-box {
    margin-top: -17px;
    .tab {
      // width: 106px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      padding: 0 5px;
    }
  }

  .active {
    background: rgba($color: #3384fe, $alpha: 0.1);
    border-radius: 3px;
    color: #3384fe;
  }
  .no-active {
    background: rgba($color: #d1cbcb, $alpha: 0.1);
    border-radius: 3px;
    color: #333;
  }
  .whole-box {
    height: 100%;
    background: #fff;
    overflow: hidden;
  }
  .title-box {
    height: 28px;
  }
  .table-box {
    height: 285px;
    background: #fff;
  }
</style>
